<script setup>
import {onMounted, ref} from 'vue'
import "ol/ol.css";
import {Map, View} from "ol";
import {Tile as TileLayer, Vector as VectorLayer} from "ol/layer";
import {OSM, Vector as VectorSource} from 'ol/source';
import {Draw, Modify, Snap} from 'ol/interaction';
import {Circle, Fill, Stroke, Style} from 'ol/style';
import {fromLonLat, transform} from 'ol/proj';

onMounted(() => {
  initMap();
})
let map;

function initMap() {
  map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    view: new View({
      center: fromLonLat([116.41, 39.9]),
      zoom: 6
    })
  });

  console.log("map init finished");
}


// global so we can remove them later
let modify, draw, snap;
let coordArr, coordArrList;
let handleMapSingleClick = function (e) {
  coordArr.push(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'))
}
let handleDrawStart = function (e) {
  coordArr = []
}
let handleDrawEnd = function (e) {
  coordArrList.push([...coordArr]);
  coordArr = []
}
let startHandlerDraw = function () {
  coordArr = [];
  coordArrList = []
  clearMap();
  map.on('singleclick', handleMapSingleClick)

  const raster = new TileLayer({
    source: new OSM(),
  });

  const source = new VectorSource();
  const vector = new VectorLayer({
    source: source,
    style: new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.2)',
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2,
      }),
      image: new Circle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33',
        }),
      }),
    }),
  });


  map.setLayers([raster, vector])

  modify = new Modify({source: source});
  map.addInteraction(modify);

  function addInteractions() {
    draw = new Draw({
      source: source,
      type: 'Polygon',
//        freehand: true,
//        freehandCondition: shiftKeyOnly,
    });
    draw.on("drawstart", handleDrawStart);
    draw.on("drawend", handleDrawEnd);
    map.addInteraction(draw);
    snap = Snap({source: source});
    map.addInteraction(snap);
  }

  /**
   * Handle change event.
   */
  addInteractions();
}

function clearMap() {
  map && map.un("singleclick", handleMapSingleClick);
  draw && draw.un("drawstart", handleDrawStart)
  draw && draw.un("drawend", handleDrawEnd)
  map && map.removeInteraction(modify);
  map && map.removeInteraction(draw);
  map && map.removeInteraction(snap);
  return JSON.stringify(coordArrList);
}

defineProps({
  msg: String
})

const count = ref(0)

</script>

<template>
  <v-card class="d-flex flex-column map pa-2" >
    <v-card-header>
      <v-toolbar fab floating>
        <v-btn @click="startHandlerDraw" color="primary" class="mr-2">手绘形状</v-btn>
        <v-btn @click="clearMap" color="primary">停止绘制形状</v-btn>
      </v-toolbar>

    </v-card-header>
    <v-card id="map" shaped class="map">

    </v-card>
  </v-card>


</template>

<style scoped>

.map {
  height: 100%;
  width: 100%;
}
</style>
